<template>
  <div class="establish">
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>创建书单</h1>
      <h2 @click="estab">发表</h2>
    </div>
    <div class="add">
      <p>书单名</p>
      <div class="inputs">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="10"
          placeholder="给我起个名字~喵"
          show-word-limit
        />
      </div>
    </div>
    <div class="estab" @click="estab">
      <span class="ift-add"></span>点击创建
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      message: "",
      cartoon: 0,
      messageList: [],
      id: "",
    };
  },
  methods: {
    returns() {
      this.$router.go("-1");
    },
    estab() {
      let name = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
      if (!name.test(this.message)) {
        Toast("给我起个名字~喵");
      } else {
        this.messageList = JSON.parse(localStorage.getItem("BookSingleName"));
        this.id = Math.floor(Math.random() * 10000000);
        this.messageList.push({
          id: this.id,
          name: this.message,
          url: "https://image.yqmh.com/mh/107490.jpg-300x400.webp",
          flag: false,
        });
        localStorage.setItem(
          "BookSingleName",
          JSON.stringify(this.messageList)
        );
        this.returns();
      }
    },
  },
};
</script>
<style lang="less">
.establish {
  .head {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    div {
      width: 45px;
      font-size: 20px;
      color: #fc6976;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
    }
    h2 {
      width: 45px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .add {
    padding: 0 10px;
    .inputs {
      .van-cell {
        padding: 2px 5px;
        background: #f8f8f8;
      }
    }
  }
  .estab {
    width: 50%;
    height: 40px;
    line-height: 40px;
    margin: 2% auto;
    text-align: center;
    border-radius: 20px;
    color: white;
    background-color: #fc6976;
  }
}
</style>